<template>
  <span
    :style="`width:${width}px;background:${
      activeColor && value
        ? activeColor
        : inActiveColor && !value
        ? inActiveColor
        : ''
    }`"
    :disabled="disabled"
    :checked="value"
    @click="click"
  ></span>
</template>

<script>
export default {
  name: "mu-switch",
  methods: {
    click() {
      if (this.disabled) {
        return;
      }
      this.$emit("input", !this.value);
      this.$emit("change", !this.value);
    },
  },
  props: {
    //激活时的颜色
    activeColor: {
      type: String,
    },
    //未激活时的颜色
    inActiveColor: {
      type: String,
    },
    value: Boolean,
    //宽度
    width: {
      type: Number,
      default: 40,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style scoped lang="scss">
@import "../variable.scss";

span {
  display: inline-block;
  transition: background 0.3s;
  background: $gray;
  height: 20px;
  border-radius: 20px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;

  &::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: white;
    left: 2px;
    top: 2px;
    transition: left 0.3s, margin-left 0.3s;
  }

  &[checked] {
    background: $blue;

    &::after {
      left: 100%;
      margin-left: -18px;
    }
  }

  &[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
  }
}
</style>